<script setup lang="ts">
import VCharts from 'vue-echarts'
import { mockAxisChart, mockTable } from '@/mock'

const { data, columns, load } = mockTable(
  ['project', 'user', 'd801', 'd802', 'd803', 'd804', 'd805', 'd806', 'd807', 'summary'],
  ['项目', '人员', '8/01', '8/02', '8/03', '8/04', '8/05', '8/06', '8/07', '合计'],
)

const chart = mockAxisChart('bar', '已填报人员的工时累计', ['张三', '李四', '王五', '赵六'])
</script>

<template>
  <ElScrollbar class="page-container">
    <ElForm
      class="form"
      :inline="true"
    >
      <ElFormItem label="项目">
        <ElSelect>
          <ElOption value="project1">
            项目1
          </ElOption>
          <ElOption value="project2">
            项目2
          </ElOption>
        </ElSelect>
      </ElFormItem>

      <ElFormItem :label-width="0">
        <ElButton
          type="primary"
          @click="load"
        >
          查询
        </ElButton>
      </ElFormItem>
    </ElForm>

    <div class="statistics-container">
      <div class="item">
        计划工时：300
      </div>
      <div class="item">
        已用工时：100
      </div>
      <div class="item">
        已用工时比率：33.3%
      </div>
      <div class="item">
        可用工时：200
      </div>
      <div class="item">
        可用工时比率：66.6%
      </div>
    </div>

    <ElTable
      :border="true"
      :stripe="true"
      :data="data"
    >
      <ElTableColumn
        v-for="item in columns"
        :key="item.property"
        v-bind="item"
      />
    </ElTable>

    <div class="pagination-container">
      <ElPagination
        layout="prev,pager,next,jumper,total"
        :total="data.length"
      />
    </div>

    <div class="chart-container">
      <VCharts
        :autoresize="true"
        :option="chart"
      />
    </div>
  </ElScrollbar>
</template>

<style lang="scss" scoped>
.page-container {
  max-height: 100%;

  .form {
    :deep(.el-form-item) {
      margin-bottom: 0;
    }
  }

  .statistics-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;

    > :not(:first-child) {
      margin-left: 6%;
    }
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
  }

  .chart-container {
    height: 300px;
  }
}
</style>

<route lang="json5">
{
  "meta": {
    "index": 3,
    "title": "项目看板",
  },
}
</route>
